<template>
  <div class="container">
    <van-nav-bar title="设备维修" fixed class="titleStyle" left-arrow @click-left="onClickLeft" />
    <div class="publicBox formDivBox">
      <!-- <div class="imgImg">
        <img src="../../../assets/images/banner.jpg" />
      </div>-->
      <div class="divUl">
        <ul>
          <li>
            <div style="border-bottom: 1px solid #022566;" @click="clickMenu({href:'./eqRepairRequest',name:'维修申请'})">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-weixiurenwu" />
              </svg>
              <span>维修申请</span>
            </div>
          </li>
          <li>
            <div style="border-bottom: 1px solid #022566;" @click="clickMenu({href:'./internalRepair',name:'内修任务'})">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-weixiurenwu" />
              </svg>
              <span>内修任务</span>
            </div>
          </li>
          <li>
            <div @click="clickMenu({href:'./externalRepair',name:'外修任务'})">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-weixiurenwu" />
              </svg>
              <span>外修任务</span>
            </div>
          </li>
        </ul>
        <div class="clearfix" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'EqRepair',
  data() {
    return {
      show: false,
      code: localStorage.getItem('code'),
      list: [],
      loading: false
    }
  },
  watch: {
    ruleForm: {
      deep: true,
      handler(row) {}
    }
  },
  created() {},
  mounted() {
    this.getData()
  },
  methods: {
    /** 点击菜单跳转 */
    clickMenu(row) {
      localStorage.setItem('name', row.name)
      this.$router.push(row.href)
    },
    async getData(row) {},
    // 返回
    onClickLeft() {
      const { query } = this.$route
      if (query.path) {
        this.$router.push(`/${query.path}`)
      } else {
        this.$router.push('/Task')
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.container {
  .imgImg {
    // margin: 0 auto;
    img {
      text-align: center;
      width: 100%;
    }
  }
  .divUl {
    width: 100%;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    ul {
      overflow: hidden;
      width: 80vw;
      padding-top: 17vh;
      height: 60vh;
      margin: 0 10vw;
      padding-bottom: 20px;
      // position: absolute;
      // top: -70px;
      background: #fff;
      background: url(../../../assets/images/banner.jpg) no-repeat center top;
      background-size: 100% auto;
      box-shadow: 1px 2px 3px 1px rgb(238, 238, 238);
      border-radius: 10px;
      li {
        width: 100%;
        float: left;
        padding: 3vw 4vw;
        div {
          width: 100%;
          height: 100%;
          padding: 3% 10%;
          text-align: center;
          position: relative;
          display: flex;
          align-items: center; /* 垂直居中 */
          justify-content: center; /* 水平居中 */
          .icon {
            width: 60px;
            height: 60px;
            color: #022566;
            // float: left;
          }
          span {
            display: block;
            width: 100%;
            text-align: center;
            height: 50px;
            line-height: 50px;
            color: #022566;
            font-size: 25px;
            // font-weight: bold;
          }
          b {
            position: absolute;
            display: inline-block;
            right: 5px;
            top: 10px;
            width: 30px;
            height: 30px;
            line-height: 30px;
            background: red;
            text-align: center;
            color: #fff;
            border-radius: 30px;
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>
<style lang='scss'>
</style>
